<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  

<script>
  // promise是为了解决回调地狱而诞生的，没有promise之前需要写很多的回调来实现功能

  // 三个状态：pending  fulfilled  rejected

  // 语法：
  // 1. 创建promise对象 承诺的是将来的事情，有可能成功，有可能失败
  // const p = new Promise((resolve, reject) => {
  //   封装一个异步的操作，表示一个将来的事情
  //   resolve成功的时候需要调用的函数，将promise状态从pending改成fulfilled
  //   rejected失败的时候需要调用的函数，将来promise状态从pending改成rejected
  // })
  // 2. 使用promise对象
  // p.then(res => {...}).catch(err => { ... })



  // 需求1：开一个延时器 setTimeout，在延迟器结束后， 做某件事： alert 一个延时器结束了
  // 需求2：要做的事情，不希望写死，第一次 alert 一个zs， 第二次 console 一个ls
  // 需求3：希望是等待做完第一件事情之后，再等待做第二件事
  
  // ---------------------------------------------------------------------
  // function fn (callback) {
  //   setTimeout(() => {
  //     // 具体做什么事情，不知道 （将要做的事情，通过回调函数传递进行来）
  //     // 传啥，就干啥
  //     callback()
  //   }, 2000)
  // }

  // // 把一个函数当成参数传递，将来调用，回调函数
  // fn(function() {
  //   console.log('zs')

  //   fn(function() {
  //     console.log('ls')

  //     fn(function() {
  //       console.log('ww')
  //     })
  //   })
  // })
  // ---------------------------------------------------------------------
  function fn () {
    return new Promise((resolve, reject) => {
      // 在异步的操作外层，包了一层promise
      setTimeout(() => {
        resolve()
      }, 2000)
    })
  }

  // 调用 fn 函数，可以得到一个promise对象
  // fn().then(() => {
  //   console.log('zs')
  //   return fn()
  // }).then(() => {
  //   console.log('ls')
  //   return fn()
  // }).then(() => {
  //   console.log('ww')
  // })


  // async await优化
  async function exam () {
    // 等两秒，做某件事
    await fn()
    console.log('zs')

    await fn()
    console.log('ls')

    await fn()
    console.log('ww')
  }
  exam()


  // 结论：如果你希望在一个异步操作结束之后，做某件事
  // 两种解决方案：
  // 1. 通过回调函数，将要做的事情，当成函数传递进去，等异步结束了，调用函数即可
  //    但是这种写法，一旦出现了多层嵌套，就意味回调地狱

  // 2. 将异步的操作封装到一个promise中
  //    利用 .then .catch,  或者 async  await 

</script>
</body>
</html>